<template>
  <div>
     <div class="button-title">
       <Button type="info" class="mp10" @click="init()">
         <Icon type="md-search"/>
         刷新
       </Button>
       <Button type="warning" class="mp10" style="margin-left:5px" @click="exportData()">
         <Icon type="ios-download-outline"/>
         导出
       </Button>
     </div>
    <div>
      <Table :columns="columns1" border :loading="loading" :data="data1" size="small" ref="table"></Table>
    </div>
  </div>
</template>

<script>
import { selectHomeIsolatorList } from '@/api/yi-qing-fang-kong'
import { date2str } from '@/api/eventlist'
export default {
  name: 'home-isolator-list',
  data () {
    return {
      columns1: [
        { title: '地区', key: 'city', width: 200, align: 'center' },
        { title: '居家隔离人员数量', key: 'homeQuarantine', align: 'center' },
        { title: '中高风险地区居家隔离人员数量', key: 'riskAreas', align: 'center' },
        { title: '门磁、视频安装数量', key: 'securityEquipment', align: 'center' },
        { title: '三级密接人员数量', key: 'levelContact', align: 'center' },
        { title: '境外转入社区居家隔离数量', key: 'overseas', align: 'center' },
        { title: '境外转入社区健康监测数量', key: 'overseas1', align: 'center' },
        { title: '居家隔离转入集中隔离数量', key: 'concentrated', align: 'center' }
      ],
      data1: [],
      loading: false
    }
  },
  computed: {},
  watch: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.$Notice.info({
        title: '查询统计中，请耐心等候~~',
        desc: ''
      })
      this.loading = true
      selectHomeIsolatorList().then(ret => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data
          this.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    exportData () {
      let today = new Date()
      this.$refs.table.exportCsv({
        filename: '居家隔离人员情况统计表' + date2str(today)
      })
    }
  }
}
</script>

<style scoped>
  .mp10 {
    margin-right: 10px;
    margin-bottom: 20px;
  }
  .button-title {
    flex-direction:row;
  }
</style>
